DefaultScrumViewport = Ext.extend(ScrumViewport, {
    constructor: function (config) {
        config = config || {};
        var center = this.getCenter();
        if (config.center.gridPanel) {
            function afterStoreLoad() {
                //var gridPanel = Ext.getCmp('grid-panel');
                var gridPanel = config.center.gridPanel;
                if (gridPanel.store.data.items.length == 0) {
                    return;
                }
                for (var i = 0; i < gridPanel.colModel.columns.length; i++) {
                    var column = gridPanel.colModel.columns[i];
                    if (column.type == 'combo') {
                        var store = new ScrumArrayStore();
                        var data = eval(gridPanel.store.data.items[0].json[column.dataIndex].candidateValue);
                        store.loadData(data);
                        column.editor = new ScrumComboBox({ store: store });
                        gridPanel.colModel.columns[i] = column;
                    }
                }
            }
            config.center.gridPanel.store.addListener('load', afterStoreLoad);
            config.center.gridPanel.show();
            center.items.push(config.center.gridPanel);
        }
        else if (config.center.treeGridPanel) {
            center.items.push(config.center.treeGridPanel);
        }
        center.title = config.center.title;
        var east = this.getEast();
        var west = this.getWest();
        var north = this.getNorth();
        var sourth = this.getSouth();
        config = Ext.apply({ items: [
            new Ext.BoxComponent(north),
            new Ext.BoxComponent(sourth),
            center,
            west,
            east
        ],
            layout: 'border'
        }, config);
        DefaultScrumViewport.superclass.constructor.call(this, config);
    },
    getNorth: function () {
        return {
            region: 'north',
            height: 40,
            autoEl: {
                tag: 'div',
                html: '<p>north - generally for menus, toolbars and/or advertisements</p>'
            }
        }
    },
    getSouth: function () {
        return {
            // lazily created panel (xtype:'panel' is default)
            region: 'south',
            contentEl: 'south',
            split: true,
            height: 20,
            minSize: 100,
            maxSize: 200,
            collapsible: true,
            title: 'South',
            margins: '0 0 0 0'
        }
    },
    getCenter: function () {
        return {
            region: 'center',
            items: []
        }
    },
    getWest: function () {
        var productBtn = new Ext.Button({ text: 'Products' });
        productBtn.on('click', function () {
            Ext.state.Manager.set('currentMenuItem', { value: 'Products' }); 
            location.href = '../product/ProductList.html'; });
        var releaseBtn = new Ext.Button({ text: 'Releases' });
        releaseBtn.on('click', function () {
            Ext.state.Manager.set('currentMenuItem', { value: 'Releases' }); 
            location.href = '../release/ReleaseList.html' });
        var sprintBtn = new Ext.Button({ text: 'Sprints' });
        sprintBtn.on('click', function () {
            Ext.state.Manager.set('currentMenuItem', { value: 'Sprints' }); 
            location.href = '../sprint/SprintList.html' });
        var teamBtn = new Ext.Button({ text: 'Teams' });
        teamBtn.on('click', function () {
            Ext.state.Manager.set('currentMenuItem', { value: 'Teams' }); 
            location.href = '../team/TeamList.html' });
        var userBtn = new Ext.Button({ text: 'Users' });
        userBtn.on('click', function () {
            Ext.state.Manager.set('currentMenuItem', { value: 'Users' }); 
            location.href = '../user/UserList.html' });
        var backlogBtn = new Ext.Button({ text: 'Backlogs' });
        backlogBtn.on('click', function () {
            Ext.state.Manager.set('currentMenuItem', { value: 'Backlogs' }); 
            location.href = '../backlog/BacklogList.html' });
        var sdBtn = new Ext.Button({ text: 'Sprint Detail' });
        sdBtn.on('click', function () {
            Ext.state.Manager.set('currentMenuItem', { value: 'Sprint Detail' }); 
            location.href = '../sprintdetail/SprintDetail.html' });
        var sdBtn2 = new Ext.Button({ text: 'Sprint Detail 2' });
        sdBtn2.on('click', function () {
            Ext.state.Manager.set('currentMenuItem', { value: 'Sprint Detail 2' }); 
            location.href = '../sprintdetail/SprintDetail2.html' });
        var vwBtn = new Ext.Button({ text: 'Virtual Wall' });
        vwBtn.on('click', function () {
            Ext.state.Manager.set('currentMenuItem', { value: 'Virtual Wall' }); 
            location.href = '../sprintdetail/VirtualWall.html' });
        var west = {
            region: 'west',
            id: 'west-panel',
            title: 'Navigation Bar',
            split: true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins: '0 0 0 5',
            layout: {
                type: 'accordion',
                animate: true
            },
            items: [
                { contentEl: 'west', title: 'Navigation', border: false, iconCls: 'nav', collapsed: false,
                    items: [
                            { layout: 'fit', items: backlogBtn },
                            { layout: 'fit', items: sdBtn },
                            { layout: 'fit', items: sdBtn2 },
                            { layout: 'fit', items: vwBtn}]
                },
                { contentEl: 'west', title: 'Administration', border: false, iconCls: 'nav', collapsed: false,
                    items: [{ layout: 'fit', items: productBtn },
                            { layout: 'fit', items: releaseBtn },
                            { layout: 'fit', items: sprintBtn },
                            { layout: 'fit', items: teamBtn },
                            { layout: 'fit', items: userBtn}]
                },
                { title: 'Settings', html: '<p>Some settings in here.</p>', border: false, iconCls: 'settings' }
                ]
        };
        var currentMenuItem = Ext.state.Manager.get('currentMenuItem');
        if (currentMenuItem && currentMenuItem.value) {
            for (var i = 0; i < west.items.length; i++) {
                var menu = west.items[i];
                if (menu && menu.items) {
                    menu.collapsed = true;
                    for (var j = 0; j < menu.items.length; j++) {
                        var menuItem = menu.items[j];
                        if (menuItem.items) {
                            if (menuItem.items.text == currentMenuItem.value) {
                                menu.collapsed = false;
                            }
                        }
                    }
                }
            }
        }
        return west;
    },
    getEast: function () {
        return {
            region: 'east',
            id: 'east-panel',
            collapsible: true,
            collapsed: true,
            split: true,
            width: 225, // give east and west regions a width
            minSize: 175,
            maxSize: 400,
            margins: '0 5 0 0',
            layout: 'fit', // specify layout manager for items
            items: new Ext.TabPanel({
                deferredRender: false,
                activeTab: 0,     // first tab initially active
                items: [
		            { contentEl: 'east1', title: 'Close Me', closable: true, autoScroll: true },
		            { contentEl: 'east2', title: 'Control Panel', autoScroll: true }
		        ]
            })
        }
    }
});
Ext.data.DataProxy.addListener('beforewrite', function (proxy, action) {
    //alert("Before " + action);
});
Ext.data.DataProxy.addListener('write', function (proxy, action, result, res, rs) {
    alert(action + ':' + res.message);
});
Ext.data.DataProxy.addListener('exception', function (proxy, type, action, options, res) {
    alert("Something bad happend while executing " + action + res.message);
});
